<template>
  <section class="component contract-formation-button">
    <el-button
      @click="onClickButton"
      class="list-button white-button"
      size="mini"
      type="text"
      >生成合同</el-button
    >
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="生成合同"
      :visible.sync="dialog"
      append-to-body
      width="650px"
      @open="
        $nextTick(() =>
          $refs['contract-formation'].getTemplateByDistributeType()
        )
      "
    >
      <contract-formation
        :applyType="applyType.value"
        :caseIds="[caseId]"
        :fromChannel="fromChannel"
        @close="dialog = false"
        ref="contract-formation"
      ></contract-formation>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import ContractFormation from "~/components/apply-component/contract-formation.vue";
import { State, namespace } from "vuex-class";
import {
  ApplyType,
  CASE_HALT_CATEGORY,
  MENU_CHANNEL
} from "~/config/enum.config";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    ContractFormation
  }
})
export default class ContractFormationButton extends Vue {
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;

  private dialog: boolean = false;
  private applyType: any = {};

  private get fromChannel() {
    const telChannel = [MENU_CHANNEL.Tel_team, MENU_CHANNEL.Tel_personal];
    const visitChannel = [MENU_CHANNEL.Visit_personal, MENU_CHANNEL.Visit_team];
    const legalChannel = [MENU_CHANNEL.Legal_personal, MENU_CHANNEL.Legal_team];

    if (telChannel.includes(this.menuChannel)) return "TEL";
    else if (visitChannel.includes(this.menuChannel)) return "VISIT";
    else if (legalChannel.includes(this.menuChannel)) return "LEGAL";
    else return "";
  }

  private onClickButton() {
    // this.applyType = ApplyType.turn
    this.dialog = true;
  }
}
</script>
<style lang="less" scope></style>
